<template>
    <el-dialog
            :title="title"
            :visible.sync="isVisible"
            :width="width"
            :before-close="handleClose"
            :lock-scroll="true"
            :close-on-click-modal="false"
            custom-class="pub_dialog"
            @open="getData"
    >
      <div class="formTitle-root">
        <div class="form-title-p">指标信息</div>
      </div>
        <VForm
                ref="vformComponents"
                :form="formData.form"
                :options="formData.options"
                :rules="formData.rules"
                :labelWidth="formData.labelWidth"
                :rowspan="rowspan"
        ></VForm>

      <div class="formTitle-root" v-if="showRule">
        <div class="form-title-p">预警参数</div>
      </div>
      <VForm
        v-if="showRule"
        ref="vformComponents1"
        :form="formData1.form"
        :options="formData1.options"
        :labelWidth="formData1.labelWidth"
        :rowspan="rowspan"
      ></VForm>
      <!--<v-table-->
        <!--v-if="showRule"-->
        <!--style="margin-bottom: 20px"-->
        <!--:table-columns="tableRuleColumns"-->
        <!--:table-data="tableRuleData"-->
        <!--:is-index="true"-->
        <!--:isDynamicCol="false"-->
        <!--ref="table">-->
      <!--</v-table>-->

      <div class="formTitle-root">
        <div class="form-title-p">预警结果信息</div>
      </div>
      <v-table
        :table-columns="tableResultColumns"
        :table-data="tableResultData"
        :is-index="false"
        :isDynamicCol="false"
        ref="table">
      </v-table>
        <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">返 回</el-button>
    </span>
    </el-dialog>
</template>

<script>
    import { cityWaringResultDetail } from '@/api/risk/cityWaringResult'
    import { cityDiyResultDetail } from '@/api/risk/cityDiyResult'
    import VForm from "@/components/VForm/index";
    import VTable from '@/components/VTable/index'
    export default {
        components: {
            VForm,
            VTable
        },
        props: {
            width: {
                type: String,
                default: "70%",
            },
            title: {
                type: String,
                default: "详情",
            },
            id:{},
            openType:{
                type:String,
                default:"add"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
            showRule:{
              type: Boolean,
              default: false
            },
            cityCheckTypeOptions:{},
            cityCheckResultTypeOptions:{},
            cityCheckResultDict:{}
        },
        watch: {
            'width': {
                handler(newVal, oldVal) {
                    console.log('newVal===',newVal, oldVal)
                    let w = this.width.split('%')[0]
                    if(w>=60){
                        this.rowspan = 2
                    }else{
                        this.rowspan = 1
                    }
                },
                deep: true,
                immediate: true
            },
        },
        computed: {
            isVisible: {
                get() {
                    return this.dialogVisible
                },
                set() {
                    this.close()
                }
            }
        },
        data() {
            return {
                tableRuleData:[],
                tableRuleColumns:[
                  {
                    prop: 'low',
                    label: '下限',
                    minWidth: '150',
                    slotname: 'low',
                    options: {}
                  },
                  {
                    prop: 'top',
                    label: '上限',
                    minWidth: '150',
                    slotname: 'top',
                    options: {}
                  }
                ],
                tableResultData:[],
                tableResultColumns:[
                  {
                    prop: 'cityName',
                    label: '城市',
                    minWidth: '150',
                    slotname: 'cityName',
                    options: {}
                  },
                  {
                    prop: 'year',
                    label: '年份',
                    minWidth: '150',
                    slotname: 'year',
                    options: {}
                  },
                  {
                    prop: 'value',
                    label: '指标数值',
                    minWidth: '150',
                    slotname: 'value',
                    options: {}
                  },
                  {
                    prop: 'valueUnit',
                    label: '数值单位',
                    minWidth: '150',
                    slotname: 'valueUnit',
                    options: {}
                  },
                  {
                    prop: 'result',
                    label: '指标结果',
                    minWidth: '150',
                    slotname: 'result',
                    options: {}
                  },
                  {
                    prop: 'getTime',
                    label: '数据时间',
                    minWidth: '150',
                    slotname: 'getTime',
                    options: {}
                  },
                  {
                    prop: 'source',
                    label: '数据来源',
                    minWidth: '150',
                    slotname: 'source',
                    options: {}
                  },
                ],
                rowspan:1,
                dict:{},
                formData1:{
                   form:{
                      low:"",
                      top:""
                   },
                  options: [
                    {
                      title: "下限值",
                      key: "low",
                      type: "text",
                      disabled: true
                    },
                    {
                      title: "上限值",
                      key: "top",
                      type: "text",
                      disabled: true
                    },
                  ],
                  labelWidth: "140px",
                },
                formData: {
                    form: {
                            cityName:"",
                            cityCode:"",
                            year:"",
                            batchNum:"",
                            areaCode:"",
                            areaName:"",
                            oneTargetName:"",
                            oneTargetNo:"",
                            twoTargetName:"",
                            twoTargetNo:"",
                            threeTargetName:"",
                            threeTargetNo:"",
                            value:"",
                            resultType:"",
                            result:"",
                            getTime:"",
                            source:"",
                        },
                    options: [
                                  {
                                    title: "体检指标名称",
                                    key: "threeTargetName",
                                    type: "text",
                                    disabled: true
                                  },
                                   {
                                       title: "体检分类",
                                       key: "checkType",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "指标大类",
                                       key: "oneTargetName",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "指标细类",
                                       key: "twoTargetName",
                                       type: "text",
                                       disabled: true
                                   },
                                  {
                                    title: "指标解释",
                                    key: "targetDescribe",
                                    type: "text",
                                    disabled: true
                                  },
                                {
                                  title: "评价结果类型",
                                  key: "resultType",
                                  type: "text",
                                  disabled: true
                                },
                    ],
                    rules: {
                    },
                    labelWidth: "140px",
                },
            };
        },
        methods: {
            cancel(){
                this.close()
            },
            handleClose(done) {
                done()
                this.close()
            },
            close(){
                this.$emit('close')
            },
            loadFormat(data, showRule){
              // 规则
              if(showRule){
                this.tableRuleData = data.rules ? JSON.parse(data.rules) : []
                this.tableRuleData.forEach(t=>{
                  t.result = this.getResultLabel(data.resultType,t.result)
                })
                this.formData1.form.low = this.tableRuleData[0].low,
                this.formData1.form.top = this.tableRuleData[0].top
              }
              // 具体
              let tableResultDataItem = {
                  cityName:data.cityName,
                  year:data.year,
                  value:data.value,
                  valueUnit: data.valueUnit,
                  result: showRule ? data.diyResult : this.getResultLabel(data.resultType,data.result),
                  getTime:showRule ? data.createTime : data['getTime'],
                  source:data.source
              }
              this.tableResultData = []
              this.tableResultData.push(tableResultDataItem)
              this.formData.form.checkType =  this.getDictValue(data.checkType, this.cityCheckTypeOptions)
              this.formData.form.resultType =  this.getDictValueType(data.resultType, this.cityCheckResultTypeOptions)
            },
            getResultLabel(resultType,result){
             return this.getDictValue(result, this.cityCheckResultDict[resultType])
            },
            getDictValueType(value,option){
              let item = option.find(t=> t.name == value)
              if(item!=undefined){
                return item.label
              }
              return value
            },
            getDictValue(value,option){
              let item = option.find(t=> t.value == value)
              if(item!=undefined){
                return item.label
              }
              return value
            },
            getData(){
                if(this.openType!="add"){
                  if(this.showRule){
                    // 规则详情
                    cityDiyResultDetail(this.id).then(res=>{
                      if(res.code==200){
                        this.formData.form = res.data
                        this.loadFormat(res.data, true)
                      }else{
                        this.$message({
                          message: this.$t('tips.systemException'),
                          type: 'error'
                        })
                      }
                    })
                  }else {
                    cityWaringResultDetail(this.id).then(res=>{
                      if(res.code==200){
                        this.formData.form = res.data
                        this.loadFormat(res.data, false)
                      }else{
                        this.$message({
                          message: this.$t('tips.systemException'),
                          type: 'error'
                        })
                      }
                    })
                  }
                }
            }
        },
    };
</script>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    /*border-bottom: 1px solid #EFEFEF;*/
    font-size: 16px;
    position: relative;
    margin-bottom: 5px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
</style>
